<template>
  <div id="zbSP">
    <section class="zbRk">
      <section class="tu">
        <img src="@/assets/images/7.jpg" />
      </section>
      <section class="wen">
        <section class="w1">
          <span class="iconfont icon-youhuiquan1"></span>
          <span class="juan">优惠券</span>
        </section>
        <section class="w2">POS潮流单品分享下单抽盲盒</section>
        <section class="w3">
          <section class="n1">
            <span class="iconfont icon-xinpin"></span>
            <span class="n1W">PSOBrand</span>
          </section>
          <section class="n2">196人再看</section>
        </section>
      </section>
    </section>
    
     <section class="zbRk" v-for="(v, i) in zb" :key="i">
      <section class="tu">
        <img :src="v.zimg">
      </section>
      <section class="wen">
        <section class="w1">
          <span class="iconfont icon-youhuiquan1"></span>
          <span class="juan">{{v.zjuan}}</span>
        </section>
        <section class="w2">{{v.ztitle}}</section>
        <section class="w3">
          <section class="n1">
            <span class="n1-tu">
              <img :src="v.ztou">
            </span>
            <span class="n1W">{{v.zname}}</span>
          </section>
          <section class="n2">{{v.zzan}}</section>
        </section>
      </section>
    </section>

 

 

   
  </div>
</template>

<script>
import axios from "axios";
export default {
  data: function () {
    return {
      zb: [],
    };
  },
  created() {
    axios({
      url: "/data/mock",
      method: "get",
    })
      .then((ok) => {
        this.zb = ok.data.zhibo;
        // console.log("ok", ok);
        // console.log("this.gz", this.gz);
      })
      .catch((err) => {
        console.log("请求失败了", err);
      });
  },
};
</script>

<style scoped>
#zbSP {
  width: 100%;
  column-count: 2;
  padding-top: 0.05rem;
  padding: 0.05rem;
  padding: 0.05rem;
  
}
#zbSP .zbRk {
  width: 1.81rem;
  height: 3.16rem;
  /* border: 0.01rem solid black; */
  /* column-span: none;
  break-inside: avoid; */
  margin-top: .08rem;
  padding-bottom: .1rem;
  break-inside: avoid;
  
}
#zbSP .zbRk img{
  width: 100%;
  height: 100%;
}
#zbSP .zbRk .tu {
  width: 1.8rem;
  height: 2.41rem;
  /* background-color: chartreuse; */
}
#zbSP .zbRk .wen {
  width: 1.8rem;
  height: 0.74rem;
  /* background-color: crimson; */
}
#zbSP .zbRk .wen .w1 {
  height: 0.18rem;
  background-color: snow;
  margin-left: 0.09rem;
}
#zbSP .zbRk .wen .w1 .iconfont {
  /* color: gold; */
  font-size: 0.14rem;
  font-weight: 700;
}
#zbSP .zbRk .wen .w1 .juan {
  font-size: 0.1rem;
  color: #d4d4d9;
}

#zbSP .zbRk .wen .w2 {
  height: 0.18rem;
  /* background-color: yellow; */
  margin-top: 0.09rem;
  margin-bottom: 0.1rem;
  font-size: 0.12rem;
  font-weight: 700;
  overflow: hidden;
  text-align: center;
  line-height: 0.18rem;
}

#zbSP .zbRk .wen .w3 {
  height: 0.14rem;
  /* background-color: violet; */
  display: flex;
  justify-content: space-between;
  margin-bottom: .1rem;
}
#zbSP .zbRk .wen .w3 .n1 {
  width: 0.7rem;
  height: 100%;
  /* background-color: lightblue; */
  display: flex;
  font-size: .1rem;
  text-align: center;
}
#zbSP .zbRk .wen .w3 .n1 .n1-tu{
 
}
/* #zbSP .zbRk .wen .w3 .n1 .n1-tu img{
  width: 100%;
  height: 100%;
} */
#zbSP .zbRk .wen .w3 .n1 .n1W{
    -webkit-transform: scale(0.833);
    font-size: .08rem;
    font-weight: 700;
    width: .4rem;
    height: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}
#zbSP .zbRk .wen .w3 .n2 {
  width: 0.6rem;
  height: 100%;
  /* background-color: lightgreen; */
  -webkit-transform: scale(0.833);
  font-size: 0.1rem;
  color: slategray;
  text-align: center;
}
</style>